<!--搜索框组件-->
<template>
  <div class="search-box">
    <input
      type="text"
      v-model="searchText"
      placeholder="输入关键字"
    />
    <button @click="handleSearch" style="margin-left: 8px;">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
    };
  },
  methods: {
    handleSearch() {
      // 触发search事件(自定义事件)，可在父组件中监听search事件来处理搜索逻辑
      this.$emit("search", this.searchText);
    },
  },
};
</script>

<style scoped>
.search-box {
  width: 300px;
  align-items: center;
  gap: 20px;
  margin-left: 400px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

